﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/layui-v2.4.5/css/layui.css" media="all">
</head>
<style>
    #big_div {
        width: 100%;
        height: 100%;
    }

    #search {
        margin-top: 20px;
    }

    #type_div {
        width: 200px;
    }
    #imgType_div {
        width: 200px;
    }
    /*.layui-btn-normal {*/
    /*background-color: #5FB878;*/
    /*}*/

    #img_div {
        margin-top: 20px;
        margin-left: 20px;
        height: 600px;
        overflow: scroll
    }

    #search_div, #form_sea {
        float: left;
    }

    /*图片上传样式开始*/
    .add_div {
        width: 100%;
        height: 100%;
        margin-top: 20px;
        margin-left: 20px;
        padding-left: 20px;
    }

    .file-list {
        height: 125px;
        display: none;
        list-style-type: none;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }
    /*图片上传样式结束*/
</style>
<body>
<div id="big_div">
    <div id="search">
        <form class="layui-form layui-input-inline" action="" id="form_sea">
            <div class="layui-form-item" id="condition">
                <label class="layui-form-label">查询日期</label>
                <div class="layui-input-inline" style="width:120px">
                    <input name="startTime" type="text" class="layui-input" id="startTime" placeholder="yyyy-MM">
                </div>
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline" style="width:120px">
                    <input name="endTime" type="text" class="layui-input" id="endTime" placeholder="yyyy-MM">
                </div>
                <label class="layui-form-label">地点</label>
                <div class="layui-input-inline" id="type_div" style="width:120px">
                    <select name="areaName" id="areaName" lay-verify="required">
                        <option value="陈仓">陈仓</option>
                        <option value="城固">城固</option>
                        <option value="定边">定边</option>
                        <option value="凤翔">凤翔</option>
                        <option value="汉阴">汉阴</option>
                        <option value="合阳">合阳</option>
                        <option value="华县">华县</option>
                        <option value="泾阳">泾阳</option>
                        <option value="靖边">靖边</option>
                        <option value="蓝田">蓝田</option>
                        <option value="临渭">临渭</option>
                        <option value="勉县">勉县</option>
                        <option value="蒲城">蒲城</option>
                        <option value="乾县">乾县</option>
                        <option value="商州">商州</option>
                        <option value="铜川">铜川</option>
                        <option value="西乡">西乡</option>
                        <option value="柞水">柞水</option>
                    </select>
                </div>
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline" id="imgType_div" style="width:120px">
                    <select name="imgType" id="imgType" lay-verify="required">
                        <option value="不限">不限</option>
                        <option value="个体">个体</option>
                        <option value="群体近">群体近</option>
                        <option value="群体远">群体远</option>
                    </select>
                </div>
            </div>
        </form>

        <div class="layui-input-inline" id="search_div" style="width:120px">
            <button class="layui-btn layui-btn-normal btn_sub" lay-submit="" id="btn_sub" lay-filter="demo1">搜索</button>
        </div>

        <div id="img_div" class="layui-form-item">
        </div>
    </div>

    <!--图片添加-->
    <div class="add_div">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-inline" id="choose-file_div" style="width:120px">
            <input type="file" name="" class="layui-input-inline" id="choose-file" multiple="multiple" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
        </div>

        <div>
            <ul class="file-list ">

            </ul>
        </div>

        <div class="layui-input-inline" id="upload_div" style="width:120px">
            <button class="layui-btn layui-btn-normal btn_sub" href="javascript:;" id="upload">上传</button>
        </div>
    </div>


    <div id="ckuserxx" style="display: none;">
        <div id="open_img" class="layui-form-item">
        </div>
    </div>
</div>
<script type="text/javascript" src="../assets/jquery/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../assets/layui-v2.4.5/layui.js" charset="utf-8"></script>
<script>
    // var url = "http://127.0.0.1:8080/ImgController/";
    var url = "http://10.172.13.72:8080/MDRMSWebService/ImgController/";
    var htp = "http://10.172.13.72:8080/img/";
   

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        //年月选择器
        laydate.render({
            elem: '#startTime'
            , type: 'month'
        });
        laydate.render({
            elem: '#endTime'
            , type: 'month'
        });
        //监听提交
    });

    $("#btn_sub").click(function () {
        if (($("#startTime").val() != null && $("#startTime").val() != "") && ($("#endTime").val() != null && $("#endTime").val() != "")) {
            var start=$("#startTime").val();
            var end=$("#endTime").val();
            var starttime = new Date(Date.parse(start));
            var endtime = new Date(Date.parse(end));
            if(starttime>endtime){
                layer.alert("开始日期不能大于结束日期！");
            }else{
                $("#img_div").empty();
                getresult();
            }
        }
            $("#img_div").empty();
            getresult();
    })
    function getresult() {
        $.ajax({
            url: url + "getImgPath",
            type: "get",
            dataType: "json",
            data: {
                "cropName": localStorage.getItem("cropName"),
                "imgType": $("#imgType").val(),
                "areaName": $("#areaName").val(),
                "startTime": $("#startTime").val(),
                "endTime": $("#endTime").val(),
            },
            async: false,
            success: function (result) {

                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        var reg = /[\u4e00-\u9fa5]/g;
                        // var str = result[i].substring(66).substring(result[i].lastIndexOf("\\") + 1).match(reg).join("");
                        var str= result[i].split("/");

                        $("#img_div").append("<div class='layui-input-inline' style='margin-left: 20px;margin-top: 20px;height: 350px;width: 350px;'>" +
                            "<img style='height: 300px;width: 300px;' src='" + htp + result[i].substring(9, result[i].length) + "'>"
                            +"</br><a style='display: block;text-align: center;margin-top: 10px;cursor:pointer;color: #1E9FFF'>" + str[str.length-1] + "</a></div>");
                        // +"</br><a style='display: block;text-align: center;margin-top: 10px;cursor:pointer;color: #1E9FFF' onclick=\"openWin('" + str + "')\">" + result[i].substring(66).substring(result[i].lastIndexOf('\\') + 1) + "</a></div>");
                    }
                }
            }
        });
    }
    function getParam(paramName) {
        paramValue = "", isFound = !1;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&");
            var i = 0;
            while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
        }
        return paramValue == "" && (paramValue = null), paramValue
    }
    function openWin(st) {

        $("#open_img").empty();
        layer.open({
            type: 1,
            shade: false,
            shadeClose: true, //点击遮罩关闭
            title: "所有参数",
            area: ['1200px', '800px'],
            content: $('#ckuserxx'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            end: function () {
                $("#ckuserxx").hide();
                $(".layui-laypage-btn")[0].click();
            },
        });

        $.ajax({
            url: url + "getNameFiles",
            type: "get",
            dataType: "json",
            data: {
                "imgName": $("#imgName").val()
            },
            async: false,
            success: function (result) {

                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        var reg = /[\u4e00-\u9fa5]/g;
                        var str = result[i].substring(result[i].lastIndexOf("\\") + 1).match(reg).join("");

                        $("#open_img").append("<div class='layui-input-inline' style='margin-left: 100px;margin-top: 20px;height: 240px;width: 240px;'>" +
                            "<img style='height: 200px;width: 200px;' src='" + htp + result[i].substring(54) + "'>" +
                            "</br><a style='display: block;text-align: center;margin-top: 10px;' onclick=\"openWin('" +  htp + result[i].substring(54) + "')\">" + result[i].substring(66).substring(result[i].lastIndexOf('\\') + 1) + "</a></div>");
                    }
                }
            }
        });
    }

    function openUrl(url){
        window.open(url);
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    $(function () {
        ////////////////////////////////////////////////图片上传//////////////////////////////////////////////
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if(numold >= 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >6 ){
                layer.alert('最多上传6张图片');
                return;
            }else if(numall > 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //curFile = $file.get(0).files;
            //console.log(curFile);
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            //console.log(fileList);
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            var cropName = localStorage.getItem("cropName");
            var imgType = $('#imgType').val();
            var areaName = $('#areaName').val();
            var startTime = $('#startTime').val();
            // var status = $("input[type='radio']:checked").val();
            // var reg = /^[1-9]\d*$/;
            // if (!(reg.test(stock))) {
            //     layer.alert('商品库存为整数!');
            //     return;
            // }
            if (startTime == '') {
                layer.alert('请选择上传图片的-时间(开始时间!)');
                return;
            }
             else if (areaName == null) {
                layer.alert('请选择上传图片的-地点');
                return;
            }
            else if (imgType == '' || imgType == '不限') {
                layer.alert('请选择上传图片的-类型');
                return;
            }
            if(fileList.length > 6){
                layer.alert('最多允许上传6张图片');
                return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    //console.log(fileList[i]);
                    formData.append('upfile[]', fileList[i]);
                }
                formData.append('cropName', cropName);
                formData.append('startTime', startTime);
                formData.append('areaName', areaName);
                formData.append('imgType', imgType);

                //console.log(formData);
                $.ajax({
                    url: url+'upload',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        var success = 0;
                        var fail = 0;
                        var result = JSON.parse(data);
                        if(result != null){
                            for(var i=0; i<result.length;i++){
                                if(result[i].status == '1'){
                                    success++;
                                }else{
                                    fail++;
                                }
                            }
                        }
                        alert("共上传成功"+success+"张"+","+"上传失败"+fail+"张");
                        // if (data.status == '1') {
                        //     layer.msg(data.content, {icon: 6});
                        // } else if (data.status == '2') {
                        //     layer.msg(data.content, {icon: 1});
                        // }
                    }
                })
            }
        })
    })

</script>
</body>
</html>